<template>

  <van-search
      v-model="value"
      show-action
      label="城市"
      placeholder="请输入搜索城市"
      @search="onSearch"
  >
    <template #action>
      <div @click="onClickButton()">搜索</div>
    </template>
  </van-search>

  <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="loadDate()"
  >
    <div class="dv2" v-for="m in city" @click="showAll(m)">
      <van-col :span="4">
        <van-image
            width="20rem"
            height="20rem"
            :src="m.imgUrl"
        />
      </van-col>



      中文名字：{{m.chineseName}}
      游记篇数：{{m.num}}
      英文名字：{{m.englishName}}
    </div>

  </van-list>

</template>

<script>
export default {

  data(){
    return{
      city:[

      ],
      value:null,
      loading:false,
      finished:false,
      refreshing:false,
      start:1,
      size:2,
      id:0
    }
  },
  methods:{
    loadDate(){
      this.loading=true;
      // 将数据放到数组中 会自动给我们装填
      this.axios.get("http://localhost:8082/api/city/selectPage.do?start="+this.start+"&size="+this.size).then(r=>{
        if(r.data.code==200){
          //成功
          for(var i in r.data.data){
            this.city.push(r.data.data[i]);
            console.log(this.city[i])
          }
          this.loading=false;
          this.start++;
          console.log(this.start)
          if(r.data.data.length==0){
            this.finished=true;
          }
        }else {
          this.loading=false;
        }
      });

    },

    //这里是满满的血泪史，axios不能把data中的数据全局修改。可以用嵌套axios来解决
    showAll(m){
      this.axios.get("http://localhost:8082/api/city/selectIdByName.do?name="+m.englishName).then((t)=>{

        //获取id
        this.id=t.data.data;

        //通过id获取笔记详情
        this.axios.get("http://localhost:8082/api/city/showAll.do?id="+this.id).then((r)=>{
          console.log(r.data.data);
          this.$store.commit("setAll",r);
          console.log(this.$store.state.att);
          this.$router.push("/attByCity");
        })
      })
    },

    onClickButton(){
      this.axios.get("http://localhost:8082/api/city/selectByName?name="+this.value).then((r)=>{
        if(r.data.code==200){
          this.$router.push({path:"/selectCityByName",query:{num:r.data.data.num,chineseName:r.data.data.chineseName,englishName:r.data.data.englishName,imgUrl:r.data.data.imgUrl}})
        }

      })
    }
  }
};



/*export default {
  name: "cityView"
}*/
</script>


<style scoped>

</style>